<script setup>
import { ref, watch } from 'vue';
import { Message } from '@arco-design/web-vue';
import { uploadCover } from "@/api/upload.js";

// 内部状态
const props = defineProps({
  modelValue: String, // 接受父组件传递的值
});
const previewImage = ref(props.modelValue || ''); // 使用父组件传递的值初始化
const cachedFile = ref(null); // 缓存的图片文件
const isUploading = ref(false); // 上传状态

/**
 * 处理图片选择
 * @param {Event} event
 */
const handleImageChange = (event) => {
  const file = event.target.files[0];

  // 文件校验
  if (!file) return;
  if (file.size > 2 * 1024 * 1024) {
    Message.error('图片大小不能超过 2MB');
    return;
  }

  // 创建一个临时的 Image 对象来检查图片分辨率和长宽比
  const img = new Image();
  const objectUrl = URL.createObjectURL(file);
  img.src = objectUrl;

  img.onload = () => {
    URL.revokeObjectURL(objectUrl); // 释放之前创建的对象URL

    if (img.width > 2048 || img.height > 2048) {
      Message.error('图片分辨率不能超过 2048x2048 像素');
      return;
    }

    // 检查图片长宽比是否在 3:2 以内
    const aspectRatio = img.width / img.height;
    if (aspectRatio > 1.5 || aspectRatio < 1 / 1.5) { // 长宽比在3:2以内
      Message.error('图片的长宽比必须在 3:2 以内');
      return;
    }

    // 生成预览图
    const reader = new FileReader();
    reader.onload = () => {
      previewImage.value = reader.result; // 设置为 base64 URL
      cachedFile.value = file; // 缓存文件
      Message.success('图片已选择并缓存');
    };
    reader.readAsDataURL(file);
  };

  img.onerror = () => {
    URL.revokeObjectURL(objectUrl); // 如果加载失败也要释放对象URL
    Message.error('无法读取图片，请重试');
  };
};

/**
 * 上传图片到服务器
 * @returns {Promise<string>} 返回图片 URL
 */
const uploadImage = async () => {
  if (!cachedFile.value) {
    Message.info('未上传封面图片');
    return null;
  }

  isUploading.value = true;
  const formData = new FormData();
  formData.append('file', cachedFile.value);

  try {
    const response = await uploadCover(formData);

    if (response.data.code === 1) {
      Message.success('图片上传成功');
      return response.data.data.url; // 返回图片 URL
    } else {
      Message.error('图片上传失败，请重试');
    }
  } catch (error) {
    console.error('图片上传失败:', error);
    Message.error('图片上传失败，请重试');
    return null;
  } finally {
    isUploading.value = false;
  }
};

// 监听父组件传递的值变化并更新预览图片
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    previewImage.value = newValue;
  }
}, { immediate: true });

defineExpose({
  uploadImage,
});
</script>

<template>
  <div class="upload-container">
    <label class="upload-box">
      <input type="file" accept="image/*" @change="handleImageChange" />
      <template v-if="previewImage">
        <img :src="previewImage" alt="预览" class="preview-image" />
      </template>
      <template v-else>
        <span class="upload-placeholder">
          {{ isUploading ? '上传中...' : '点击上传图片' }}
        </span>
      </template>
    </label>
    <p class="upload-info">支持 JPG/PNG 图片，大小不超过 2MB</p>
  </div>
</template>

<style scoped>
.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 150px;
  border: 2px dashed #d9d9d9;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-fill-1);
}

.upload-box input {
  display: none;
}

.upload-placeholder {
  color: #999;
  text-align: center;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-info {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
</style>
